<template>
    <ex-dialog width="1200px" class="ex-diolog" title="分类列表" :visible="visible" @closeDialog="handleClose">
        <el-form ref="form" :model="form" :rules="rules" label-width="130px">
            <el-form-item label="列表名称:" prop="name">
                <el-input type="text" v-model="form.name" placeholder="请输入列表名称" style="width: 550px;"></el-input>
            </el-form-item>
            <el-form-item label="选择上架赚卡:" prop="id">
                <el-select v-model="form.id" placeholder="请选择赚卡" filterable multiple @change="changePunchActivityId"
                    style="width: 550px;">
                    <el-option v-for="item in goodsList" :key="item.id" :label="item.cardName" :value="item.id">
                        <div class="select-flow">{{ item.cardName }}</div>
                    </el-option>
                </el-select>
                <!-- <el-button type="primary" style="margin-left: 20px">确认</el-button> -->
            </el-form-item>
            <div class="numBox">选择商品（{{goodsNum}}/100）</div>
            <el-table :data="tabelList" v-loading="loading" element-loading-spinner="el-icon-loading"
                element-loading-background="rgba(0, 0, 0, 0.6)" element-loading-text="加载中" stripe border>
                <el-table-column label="序号" align="center" type="index" width="64px" />
                <el-table-column label="活动名称" align="center" :show-overflow-tooltip="true">
                  <template slot-scope="scope">
                      <div v-if="scope.row.name">{{ scope.row.activityName }}</div>
                      <div v-else>-</div>
                  </template>
                </el-table-column>
                <el-table-column label="发行店铺" align="center" prop="issuerShop" :show-overflow-tooltip="true" />
                <el-table-column label="卡名称" align="center" prop="cardName" :show-overflow-tooltip="true" />
                <el-table-column label="卡功能" align="center" prop="functionType" :show-overflow-tooltip="true">
                  <template slot-scope="scope">
                    <div v-if="scope.row.functionType == 1">权益NFR</div>
                    <div v-if="scope.row.functionType == 2">勋章NFR</div>
                    <div v-if="scope.row.functionType == 3">赚卡</div>
                  </template>
                </el-table-column>
                <el-table-column label="发行方" align="center" prop="issuer" :show-overflow-tooltip="true">
                  <template slot-scope="scope">
                      <div v-if="scope.row.issuer">{{ scope.row.issuer }}</div>
                      <div v-else>-</div>
                  </template>
                </el-table-column>
                <el-table-column label="上链时间" align="center" prop="chainTime" :show-overflow-tooltip="true">
                  <template slot-scope="scope">
                      <div v-if="scope.row.chainTime">{{ scope.row.chainTime }}</div>
                      <div v-else>-</div>
                  </template>
                </el-table-column>
                <el-table-column label="售价" align="center" prop="price" :show-overflow-tooltip="true" />
                <el-table-column label="库存总量" align="center" prop="issueTotal" :show-overflow-tooltip="true" />
                <el-table-column label="剩余库存" align="center" prop="useable" :show-overflow-tooltip="true" />
                <el-table-column label="是否显示" align="center" prop="isShow" :show-overflow-tooltip="true">
                  <template slot-scope="scope">
                    <el-switch v-model="scope.row.isShow" active-value="1" inactive-value="2"
                      @change="changeShenyeShopStatus($event, scope.row.id)">
                    </el-switch>
                  </template>
                </el-table-column>
                <el-table-column label="排序" align="center" width="160px">
                    <template slot-scope="scope">
                        <el-button size="mini" type="text" @click="orderClick(0, scope.$index)"
                            v-if="scope.$index != 0">上移</el-button>
                        <el-button size="mini" type="text" @click="orderClick(1, scope.$index)"
                            v-if="scope.$index < tabelList.length - 1">下移</el-button>
                        <el-button size="mini" type="text" @click="orderClick(2, scope.$index)"
                            v-if="scope.$index == tabelList.length - 1">置顶</el-button>
                        <el-button size="mini" type="text" @click="orderClick(3, scope.$index)"
                            v-if="scope.$index != tabelList.length - 1">置底</el-button>
                    </template>
                </el-table-column>
                <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
                    <template slot-scope="scope">
                        <el-button size="mini" type="text"
                            @click="deleteView(scope.$index, scope.row.id)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="submitForm('form')" :loading="sumitLoading">保存提交</el-button>
            <el-button @click="handleClose">取 消</el-button>
        </div>
    </ex-dialog>
</template>
  
<script>
import {
  nfrSelect,
  saveClassification,
  classificationDetail,
} from '@/api/incentiveManagement/dyConfig'
export default {
    // dicts: ['asset_card_type'],
    name: "Dialog",
    props: {
        visible: Boolean,
        id: String,
        pathType: String,
    },
    data() {
        return {
            sumitLoading: false,
            loading: false,
            title: "打卡活动配置",
            goodsList: [],
            tabelList: [],
            goodsNum: 0,
            form: {
              id: [],
              name: '',
            },
            configList: [
                {
                    id: '',//打卡活动id
                    sort: '',//推荐序号
                }
            ],
            // 表单校验
            rules: {
              name: [{
                required: true,
                message: "请输入列表名称",
                trigger: ['change', 'blur'],
              }],
              id: [{
                required: true,
                message: "请选择",
                trigger: 'change',
              }],
            },
        };
    },
    created() {
        this.getGoods()
        this.getDetail()
    },
    methods: {
        //获取打卡活动下拉
        getGoods() {
            nfrSelect().then(res => {
                this.goodsList = res.result
            })
        },
        //获取列表
        getDetail() {
          classificationDetail().then(res => {
            res.result.configList.forEach(item => {
                this.form.id.push(item.id)
            })
            this.goodsNum = res.result.selectNum
            this.form.name = res.result.name
            this.tabelList = res.result.configList
          })
        },
        //活动选择
        changePunchActivityId(e, index) {
            this.goodsNum = e.length
            this.tabelList = []
            this.form.id.forEach(item => {
              this.goodsList.forEach(aitem => {
                  if (item == aitem.id) {
                      this.tabelList.push(aitem)
                  }
              })
            })
            
        },
        //取消
        handleClose(formName) {
            this.$emit('update:visible', false)
            this.reset();
        },
        reset() {
            this.$refs['form'].resetFields();
        },
        //确认
        handleConfirm() {
            this.$emit('success')
        },
        /** 删除提交按钮deleteWhite */
        deleteView(index, id) {
            this.$confirm('是否删除', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.tabelList.splice(index, 1)
               
                this.form.id.forEach((item, indexs) => {
                    if (item == id) {
                        this.form.id.splice(indexs, 1)
                        this.goodsNum = this.form.id.length
                    }
                })

            }).catch(() => { });

        },
        /** 执行按钮 */
        submitForm() {
            this.$refs["form"].validate(valid => {
                if(this.tabelList.length > 100){
                  this.$message.error('最多选择100条数据');
                  return
                }
                if (valid) {
                    var data = {
                        name: this.form.name,
                        configList: this.tabelList
                    }
                    this.sumitLoading = true
                    console.log(data)
                    saveClassification(data).then(response => {
                        this.$message.success('执行成功');
                        this.handleClose();
                        this.$emit('success')
                    }).catch(() => {
                        this.sumitLoading = false;  
                    });
                }
            });
        },
        //上移、下移、置顶、置底
        orderClick(type, i) {

            // 深度拷贝原数组，因为下面会使用 splice 方法，避免影响原数组
            let arr = [...this.tabelList];
            // 默认下标 0
            let index = 0;
            // 判断
            switch (type) {
                case 0: {// 上移
                    index = i === 0 ? i : (i - 1);
                    break;
                }
                case 1: {// 下移
                    index = i === arr.length - 1 ? i : (i + 1);
                    break;
                }
                case 2: {// 置顶
                    index = 0;
                    break;
                }
                case 3: {// 置底
                    index = arr.length - 1;
                    break;
                }
            }
            // 先删除原有
            let item = arr.splice(i, 1);
            // 再删除新地方
            arr.splice(index, 0, item[0]);
            this.tabelList = arr;
        },
    }
};

</script>
<style scoped>
.main {
    background-color: #fff;
    border-radius: 8px;
    padding: 20px 20px;
}

.icon_yes {
    font-size: 28px;
    color: #67c23a;
}

.el-select {
    width: 640px;
}

.el-button {
    margin: 0 20px;
}
.select-flow{
    width: 500px;
    white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
::v-deep .el-tag.el-tag--info{
    max-width: 300px;
    white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.numBox{
  padding: 14px 0;
  color: #1890ff;
  font-size: 20px;
}
</style>
  